﻿<template>
  <div class="residents-container">
    <el-dialog
      v-model="dialogObj.isDialogVisible"
      :title="dialogObj.editResidentsTitle"
      width="1000px"
      top="10vh"
      modal-class="res-add"
    >
      <div class="res-add-content">
        <el-form ref="ruleFormRef" :model="ruleForm" label-width="120px" :rules="rules">
          <el-row :gutter="20">
            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="姓名：" prop="name">
                <el-input
                  v-model="ruleForm.name"
                  placeholder="请输入姓名"
                  style="width: 300px"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="性别：" prop="gender">
                <el-radio
              d
                  v-model="ruleForm.gender"
                  disabled
                  class="el-radio-n"
                  label="男"
                  border
                  size="small"
                  >男</el-radio
                >
                <el-radio
                  v-model="ruleForm.gender"
                  disabled
                  class="el-radio-n"
                  label="女"
                  border
                  size="small"
                  >女</el-radio
                >
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="证件类型：" prop="cardType">
                    <el-select
                      disabled
                      v-model="ruleForm.cardType"
                      placeholder="请选择证件类型"
                      style="width: 300px; height: 32px"
                      ref="cardTypeInput"
                    >
                      <el-option
                        label="居民身份证"
                        value="居民身份证"
                         
                      ></el-option>
                      <el-option
                        label="港澳台居民身份证"
                        value="港澳台居民身份证"
                      ></el-option>
                      <el-option
                        label="外国人永久居留身份证"
                        value="外国人永久居留身份证"
                      ></el-option>
                      <el-option
                        label="港澳台居民居住证"
                        value="港澳台居民居住证"
                      ></el-option>
                      <el-option
                        label="居民户口本"
                        value="居民户口本"
                      ></el-option>
                      <el-option label="护照" value="护照"></el-option>
                      <el-option label="军官证" value="军官证"></el-option>
                      <el-option
                        label="文职干部证"
                        value="文职干部证"
                      ></el-option>
                      <el-option label="士兵证" value="士兵证"></el-option>
                      <el-option label="驾驶执照" value="驾驶执照"></el-option>
                      <el-option label="出生证" value="出生证"></el-option>
                      <el-option label="其他" value="其他"></el-option>
                      <el-option label="儿保卡" value="儿保卡"></el-option>
                    </el-select>
                  </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="证件号码：" prop="cardNumber">
                <el-input
                  v-model="ruleForm.cardNumber"
                  placeholder="请输入证件号码"
                  style="width: 300px"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
           
            <!-- <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="出生日期：" prop="birthday">
                <el-input
                  v-model="ruleForm.birthday"
                  disabled
                  placeholder="请输入出生日期"
                  style="width: 300px"
                ></el-input>
              </el-form-item>
            </el-col> -->
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="白细胞计数：" prop="wbc">
                <el-input
                  clearable
                  v-model="ruleForm.wbc"
                  ref="heightInput"
                  :maxlength="5"
                  style="width: 300px; height: 32px"
                >
                  <template #append>×10^9/L</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="血小板计数：" prop="plf">
                <el-input
                  clearable
                  v-model="ruleForm.plf"
                  ref="heightInput"
                  :maxlength="5"
                  style="width: 300px; height: 32px"
                >
                  <template #append>×10^9/L</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="血红蛋白：" prop="hgb">
                <el-input
                  clearable
                  v-model="ruleForm.hgb"
                  ref="heightInput"
                  :maxlength="5"
                  style="width: 300px; height: 32px"
                >
                  <template #append>g/L</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="血葡萄糖：" prop="glu">
                <el-input
                  clearable
                  v-model="ruleForm.glu"
                  ref="heightInput"
                  :maxlength="5"
                  style="width: 300px; height: 32px"
                >
                  <template #append>mmol/L</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="糖化血红蛋白：" prop="hbA1c">
                <el-input
                  clearable
                  v-model="ruleForm.hbA1c"
                  ref="heightInput"
                  :maxlength="5"
                  style="width: 300px; height: 32px"
                >
                  <template #append>%</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="谷丙转氨酶：" prop="alt">
                <el-input
                  clearable
                  v-model="ruleForm.alt"
                  ref="heightInput"
                  :maxlength="5"
                  style="width: 300px; height: 32px"
                >
                  <template #append>U/L</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="谷草转氨酶：" prop="ast">
                <el-input
                  clearable
                  v-model="ruleForm.ast"
                  ref="heightInput"
                  :maxlength="5"
                  style="width: 300px; height: 32px"
                >
                  <template #append>g/L</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="白蛋白：" prop="alb">
                <el-input
                  clearable
                  v-model="ruleForm.alb"
                  ref="heightInput"
                  :maxlength="5"
                  style="width: 300px; height: 32px"
                >
                  <template #append>g/L</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="总胆红素：" prop="tbil">
                <el-input
                  clearable
                  v-model="ruleForm.tbil"
                  ref="heightInput"
                  :maxlength="5"
                  style="width: 300px; height: 32px"
                >
                  <template #append>μmol/L</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="直接胆红素：" prop="dbil">
                <el-input
                  clearable
                  v-model="ruleForm.dbil"
                  ref="heightInput"
                  :maxlength="5"
                  style="width: 300px; height: 32px"
                >
                  <template #append>μmol/L</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="肌酐：" prop="crea">
                <el-input
                  clearable
                  v-model="ruleForm.crea"
                  ref="heightInput"
                  :maxlength="5"
                  style="width: 300px; height: 32px"
                >
                  <template #append>μmol/L</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="尿素：" prop="urea">
                <el-input
                  clearable
                  v-model="ruleForm.urea"
                  ref="heightInput"
                  :maxlength="5"
                  style="width: 300px; height: 32px"
                >
                  <template #append>mmol/L</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="血钾：" prop="k">
                <el-input
                  clearable
                  v-model="ruleForm.k"
                  ref="heightInput"
                  :maxlength="5"
                  style="width: 300px; height: 32px"
                >
                  <template #append>mmol/L</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="血钠：" prop="na">
                <el-input
                  clearable
                  v-model="ruleForm.na"
                  ref="heightInput"
                  :maxlength="5"
                  style="width: 300px; height: 32px"
                >
                  <template #append>mmol/L</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="总胆固醇：" prop="tc">
                <el-input
                  clearable
                  v-model="ruleForm.tc"
                  ref="heightInput"
                  :maxlength="5"
                  style="width: 300px; height: 32px"
                >
                  <template #append>mmol/L</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="甘油三脂：" prop="tg">
                <el-input
                  clearable
                  v-model="ruleForm.tg"
                  ref="heightInput"
                  :maxlength="5"
                  style="width: 300px; height: 32px"
                >
                  <template #append>mmol/L</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="低密度脂蛋白：" prop="ldlC">
                <el-input
                  clearable
                  v-model="ruleForm.ldlC"
                  ref="heightInput"
                  :maxlength="5"
                  style="width: 300px; height: 32px"
                >
                  <template #append>mmol/L</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="高密度脂蛋白：" prop="hdlC">
                <el-input
                  clearable
                  v-model="ruleForm.hdlC"
                  ref="heightInput"
                  :maxlength="5"
                  style="width: 300px; height: 32px"
                >
                  <template #append>mmol/L</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="尿酸：" prop="ua">
                <el-input
                  clearable
                  v-model="ruleForm.ua"
                  ref="heightInput"
                  :maxlength="5"
                  style="width: 300px; height: 32px"
                >
                  <template #append>μmol/L</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="检验时间：" prop="exaTime">
                <el-date-picker
                :disabled-date="disableFutureDates"
                  v-model="ruleForm.exaTime"
                  type="datetime"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  format="YYYY-MM-DD HH:mm:ss"
                  placeholder="请选择日期"
                  style="width: 300px; height: 32px"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog" size="large">取 消</el-button>
          <el-button type="primary" @click="onSubmit" size="large"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
// import { parseISO } from "date-fns";
import http from "@/utils/request";
import { ElMessage } from "element-plus";
const disableFutureDates = (time) =>  time > new Date();
export default {
  props: {
    dialogObj: {
      type: Object,
      default: () => ({
        isDialogVisible: false,
        editResidentsTitle: "",
        DialogDate: {},
      }),
    },
  },
  data() {
    const validtrue = (rule, value, callback) => {
      if (!value) {
        callback(new Error("此项为必填"));
      } else {
        callback();
      }
    };
    //姓名
    const validname = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入姓名"));
      } else if (!/^[\u4e00-\u9fa5A-Za-z]+$/.test(value)) {
        callback(new Error("请输入正确的姓名"));
      } else {
        callback();
      }
    };
    //性别
    const validsex = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请选择性别"));
      } else {
        callback();
      }
    };
    //身份证
    const validatorIdCard = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入证件号码"));
      }  else {
        callback();
      }
    };

    //证件类型
    const validatType = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请选择证件类型"));
      } else {
        callback();
      }
    };



    return {
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        },
      },
      isshow: true,
      tipshow: true,
      inspectionTime:new Date(),
      // 基本信息
      ruleForm: {
        //姓名
        name: "",
        //证件号码
        cardNumber: "",
        //证件类型
        cardType: "",
        //性别
        gender: "",
        //出生日期
        // birthday: "",
        // 白细胞计
        wbc: "",
        // 血小板计
        plf: "",
        //血红蛋白
        hgb: "",
        // 血葡萄糖
        glu: "",
        // 糖化血红蛋白
        hbA1c: "",
        // 谷丙转氨酶
        alt: "",
        // 谷草转氨酶
        ast: "",
        // 白蛋白
        alb: "",
        // 总胆红素
        tbil: "",
        // 直接胆红素
        dbil: "",
        // 肌酐
        crea: "",
        // 尿酸
        ua: "",
        // 尿素
        urea: "",
        // 血钾
        k: "",
        // 血钠
        na: "",
        // 总胆固醇
        tc: "",
        // 甘油三脂
        tg: "",
        // 低密度脂蛋白
        ldlC: "",
        // 高密度脂蛋白
        hdlC: "",
        // 检验时间
        exaTime: "",  
      },
      rules: {
        name: [{ required: true, validator: validname, trigger: "change" }],
        gender: [{ required: true, validator: validsex, trigger: "change" }],
        cardNumber: [
          { required: true, validator: validatorIdCard, trigger: "change" },
        ],
        cardType: [
          { required: true, validator: validatType, trigger: "change" },
        ],
       
      },
    };
  },

  methods: {
    disableFutureDates,
    //关闭弹窗
    closeDialog() {
      this.dialogObj.isDialogVisible = false;
    },
    //提交
    onSubmit() { 
      this.$refs.ruleFormRef.validate((valid) => {
        if(valid){
          console.log(valid);
          http.post("/assist/blood/update", {...this.ruleForm}).then((res) => {
        if (res.code == 200) {
          ElMessage.success(res.message);
        this.$emit("changeDrug");
        this.closeDialog();
        } else {
          this.closeDialog();
        }
      });
        }
    
      });
    
    },

  },
  watch: {
    dialogObj: {
      handler(newVal, oldVal) {
        this.ruleForm = {...newVal.DialogDate};
      },
      deep: true, // 深度监听，确保对象内部属性的变化也能被监听到
    },
  },
  mounted() {},
};
</script>

<style scoped>
.residents-container {
  box-sizing: border-box;
  -ms-overflow-style: none !important; /* 适用于IE和Edge */
  scrollbar-width: none !important; /* 适用于Firefox */
}
.res-add-content {
  overflow-y: auto;
  box-sizing: border-box;
  -ms-overflow-style: none !important; /* 适用于IE和Edge */
  scrollbar-width: none !important; /* 适用于Firefox */
}
.res-add-content::-webkit-scrollbar {
  display: none !important;
}

.ml20 {
  margin-left: 25px;
}
.flex {
  display: flex;
}
.el-radio.is-bordered {
  padding: 0 50px 0 50px;
  height: 32px;
}
.shell {
  width: 100%;
  border: 1px solid #ccc;
}
:deep(.el-checkbox-group) {
  display: flex;
  flex-wrap: wrap;
}
:deep(.el-checkbox) {
  margin-right: 18px;
}
:deep(.el-input-group__append) {
  width: 52px;
}
/* :deep(.el-checkbox__inner) {
  border-radius: 50%;
} */
:deep(.el-dialog__header) {
  background-color: #016dff;
  margin: 0;
  height: 30px;
  margin-bottom: 30px;
}
:deep(.el-dialog__title) {
  color: #fff;
}
:deep(.el-dialog__headerbtn .el-dialog__close) {
  color: #fff;
  font-size: 30px;
}
:deep(.el-form-item--large .el-form-item__content) {
  margin-left: 0 !important;
}
:deep(.el-form-item .el-select__wrapper){
  width: 100% !important;
}
.title_box {
  width: 150px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border: 1px solid #000;
  background-color: #ccc;
}
.iconBox {
  font-size: 25px;
  /* position: absolute;
  right: 168px;
  top: 68px; */
  cursor: pointer;
  margin-left: 15px;
}
.flexBox {
  display: flex;
  margin-bottom: 20px;
}
.flexB {
  display: flex;
  justify-content: end;
}
.bing {
  padding-left: 174px;
}
.tip {
  font-size: 12px;
  color: red;
  z-index: 9;
}
.mb20 {
  margin-bottom: 20px;
}
</style>
